<div class="padding-bottom-45">

  <h3>
    <span>{{l('CreateNewRole')}}</span>
  </h3>

  <form nz-form [formGroup]="validateForm" (ngSubmit)="submit()">

    <!-- 角色名称 -->
    <nz-form-item>
      <nz-form-control nzHasFeedback>
        <input nz-input formControlName="name" [placeholder]="l('Name')">
        <nz-form-explain *ngIf="validateForm.get('name').dirty&&validateForm.get('name').errors">
          <ng-container *ngIf="validateForm.get('name').hasError('required')">{{l('CanNotNull')}}</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- 角色展示名称 -->
    <nz-form-item>
      <nz-form-control nzHasFeedback>
        <input nz-input formControlName="displayName" [placeholder]="l('DisplayName')">
        <nz-form-explain *ngIf="validateForm.get('displayName').dirty&&validateForm.get('displayName').errors">
          <ng-container *ngIf="validateForm.get('displayName').hasError('required')">{{l('CanNotNull')}}</ng-container>
        </nz-form-explain>
      </nz-form-control>
    </nz-form-item>

    <!-- 角色介绍 -->
    <nz-form-item>
      <nz-form-control>
        <input nz-input formControlName="description" [placeholder]="l('RoleDescription')">
      </nz-form-control>
    </nz-form-item>

    <!-- 权限组 -->
    <nz-form-item>
      <nz-checkbox-group formControlName="permissions" *ngIf="permissionList.length!=0"></nz-checkbox-group>
    </nz-form-item>

    <!-- 功能按钮 -->
    <div class="custom-modal-footer">
      <div class="custom-modal-footter-group">
        <button nz-button type="button" [disabled]="saving" (click)="close()">
          {{l("Cancel")}}
        </button>
        <button nz-button [nzType]="'primary'" type="submit" [disabled]="!validateForm.valid">
          {{l("Save")}}
        </button>
      </div>
    </div>

  </form>
</div>
